<template>
	<view class="page-container edit-be-service-user-container">
		<view class="header-notice">
			<scroll-view scroll-x="true" style="height: 100%;">
				<text>服务中我们会为就诊人</text>
				<text class="red-color">免费提供意外险、第三者责任险及医疗</text>
			</scroll-view>
		</view>
		<view class="content">
			<view class="form">
				<view class="form-item">
					<view class="form-item-label">
						<view class="icon">
							<image style="height: 48rpx;" :src="$img_path('/home/icon-user.png')" mode="heightFix"></image>
						</view>
					</view>
					<view class="form-item-content">
						<input v-model="formdata.name" type="text" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						<text>性别</text>
					</view>
					<view class="form-item-content">
						<view class="sex-select-sexs">
							<view class="sex-item" @click="sexChange(1)">
								<view class="sex-icon">
									<image v-if="formdata.sex == 1" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
									<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
								</view>
								<text>男</text>
							</view>
							<view class="sex-item" @click="sexChange(2)">
								<view class="sex-icon">
									<image v-if="formdata.sex == 2" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
									<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
								</view>
								<text>女</text>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						<view class="icon">
							<image style="height: 48rpx;" :src="$img_path('/home/icon-iphone.png')" mode="heightFix"></image>
						</view>
					</view>
					<view class="form-item-content">
						<input v-model="formdata.mobile" type="text" placeholder="请填写被服务人员手机号码" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						<view class="icon">
							<image style="height: 48rpx;" :src="$img_path('/home/icon-users.png')" mode="heightFix"></image>
						</view>
					</view>
					<view class="form-item-content">
						<input v-model="formdata.gx" disabled type="text" placeholder="与被服务人员关系" />
					</view>
				</view>
			</view>
			<view class="tag-box">
				<view class="tag-item" :class="{'tag-active': item == formdata.gx}" v-for="(item,index) in gxList" :key="index" @click="gxChange(item)">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<view class="fixed-btn-box" v-if="!id">
			<view class="fixed-btn common-btn-bg-color" @click="submit">
				<text>保存</text>
			</view>
		</view>
		<view class="fixed-btn-box display-flex alig space-between" v-else>
			<view @click="delSave" class="del-btn common-btn">
				<text>删除</text>
			</view>
			<view @click="submit" class="save-btn common-btn common-btn-bg-color">
				<text>保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSysConfig, submitBfwSave, delBfwSave } from "@/utils/api/serviceApi.js"
	export default {
		data() {
			return {
				formdata: {
					mobile: "",
					sex: 2,
					gx: "",
					name: ""
				},
				gxList: [],
				id: null
			};
		},
		onLoad(options) {
			if (options.user) {
				const value = decodeURIComponent(options.user)
				console.log("options.user", value)
				const _value = JSON.parse(value)
				this.id = _value.id
				Object.keys(this.formdata).forEach(key => {
					this.formdata[key] = _value[key]
				})
				uni.setNavigationBarTitle({
					title: "修改被服务人员信息"
				})
			}
			this.getGxList()
		},
		methods: {
			async submit() {
				console.log("保存", this.formdata)
				uni.showLoading({
					mask: true
				})
				try{
					const data = {
						...this.formdata
					}
					if (this.id) {
						data['id'] = this.id
					}
					const res = await submitBfwSave(data)
					uni.showToast({
						title: "保存成功"
					})
					uni.$emit("refreshServiceUserList")
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				}catch(e){
					//TODO handle the exception
					console.log("保存失败", e)
				} finally {
					uni.hideLoading()
				}
			},
			
			// 删除
			delSave(){
				uni.showLoading({
					title:'删除中...'
				})
				delBfwSave({id:this.id}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'删除成功',
						icon:'none',
						success() {
							uni.navigateBack()
						}
					})
				})
			},
			
			sexChange(sex) {
				this.formdata.sex = sex
			},
			
			gxChange(gx) {
				this.formdata.gx = gx
			},
			
			async getGxList() {
				try{
					const res = await getSysConfig({
						site: "service_gx"
					})
					console.log("服务人员关系", res)
					this.gxList = res.data || []
					if (this.gxList.length) {
						this.formdata.gx = this.gxList[0]
					}
				}catch(e){
					//TODO handle the exception
					console.log("获取服务人员关系列表失败", e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.edit-be-service-user-container {
	min-height: 100vh;
	background-color: #fff;
}

.icon-48 {
	width: 48rpx;
	height: 48rpx;
}

.header-notice {
	width: 100%;
	height: 68rpx;
	background: #FFF2F2;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	line-height: 68rpx;
	padding: 0 22rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #333;
}

.red-color {
	color: #E72A2A;
}

.content {
	padding: 26rpx;
}

.form {
	
}

.form-item {
	padding: 28rpx 0;
	border-bottom: 2rpx solid #F8F8F8;;
	display: flex;
}

.form-item-label {
	width: 80rpx;
	font-weight: bold;
	font-size: 30rpx;
	color: #333333;
}

.sex-select-sexs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
}

.sex-item {
	font-weight: bold;
	font-size: 30rpx;
	color: #333333;
	display: flex;
	align-items: center;
	margin-right: 100rpx;
}

.sex-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 16rpx;
}

.tag-box {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	
	.tag-item {
		padding: 18rpx 36rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	
	.tag-active {
		color: #fff;
		background: linear-gradient( 180deg, #FFA233 0%, #FB4C4C 100%);
	}
}

.common-btn {
	width: 300rpx;
	height: 96rpx;
	border-radius: 80rpx 80rpx 80rpx 80rpx;
	font-weight: bold;
	font-size: 36rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.del-btn {
	background: #F8F8F8;
}

.save-btn {
	color: #fff;
}
</style>
